<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div>企业名称：<span><el-input v-model="pageParams.name" placeholder="请输入企业名称" class="input-1" /><el-button type="primary" class="chaxun" @click="chaXun">查询</el-button> </span></div>
        </div>
        <div>
          <el-button type="primary" @click="$router.push('/add')">添加企业</el-button>
        </div>
        <el-table :data="list" row-key="id" @expand-change="expandChange">

          <!-- 放置列 -->
          <el-table-column width="60" type="expand">
            <template>
              <!-- 下拉列表 -->
              <el-card class="MonthCard">
                <el-table
                  style="width: 100%"
                  row-key="id"
                  :data="arrList"
                >
                  <el-table-column
                    prop="buildingName"
                    width="200"
                    label="租赁楼宇"
                  />
                  <el-table-column
                    prop="startTime"
                    label="租赁起止时间"
                    width="200"
                  >
                    <template v-slot="{ row }">
                      {{ row.startTime }}-{{ row.endTime }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    width="250"
                    label="合同状态"
                  >
                    <template v-slot="{ row }">
                      <span v-if="row.status === 0">待生效</span>
                      <span v-else-if="row.status === 1">生效中</span>
                      <span v-else-if="row.status === 2">已到期</span>
                      <span v-else-if="row.status === 3">已退租</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="操作"
                    width="250"
                  >
                    <template v-slot="{ row }">
                      <el-button size="mini" type="text">续租</el-button>
                      <el-button size="mini" type="text">退租</el-button>
                      <el-button size="mini" type="text" :disabled="row.status===0 || row.status===1">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column type="index" align="center" width="80" label="序号" />
          <el-table-column prop="name" align="center" width="300" label="企业名称" />
          <el-table-column prop="contact" align="center" width="200" label="联系人" />
          <el-table-column prop="contactNumber" align="center" width="200" label="联系电话" />
          <el-table-column prop="id" label="操作">
            <template v-slot="{ row }">
              <el-button size="mini" type="text" @click="contract(row)">添加合同</el-button>
              <el-button size="mini" type="text" @click="$router.push(`detail/${row.id}`)">查看</el-button>
              <el-button size="mini" type="text" @click="$router.push(`/add/${row.id}`)">编辑</el-button>
              <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="pageParams.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total,  prev, pager, next,sizes "
            :total="pageParams.total"
            @size-change="currentChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <el-dialog
        title="添加合同"
        :visible.sync="dialogVisible"
        width="40%"
      >
        <el-form label-width="100px" class="demo-ruleForm" label-position="top">

          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select
              v-model="contractList.buildingId"
              placeholder="请选择所在行业"
              style="width:25vw"
              size="medium"
              class="kuan"
            >
              <el-option
                v-for="(item,index) in selectedList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="租赁起止日期" prop="startTime">
            <el-date-picker
              v-model="selectedDate"
              style="width:25vw"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>

          <el-form-item label="营业执照" prop="businessLicenseId">
            <el-upload

              ref="excel-upload-input"
              class="upload-demo"
              :before-upload="beforeUpload"
              action=""
              :file-list="fileList"
              type="file"
              :http-request="uploadImage"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                支持扩展名：.png .jpg .jpeg,文件大小不得超过5M</div>
            </el-upload>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { deleteParkEnterprise, getEnterprise, getEnterpriseRent, postParkEnterpriseRent, postUpload } from '@/api/building/enterprise'
import { getParkRentBuilding } from '@/api/building/building'

export default {
  name: 'EnterPrise',
  data() {
    return {
      pageParams: {
        name: '', // 模糊查询
        pageSize: 10,
        page: 1,
        total: 1
      },
      // 页面表单
      list: [],
      // 树形下拉表单
      arrList: [],
      fileList: [],
      iconAdd: true,
      iconSubtract: false,
      // 模态框 弹框
      dialogVisible: false,
      // 添加合同表单

      contractList: {
        buildingId: '', // 租赁楼宇id
        startTime: '', // 开始日期
        endTime: '', // 租赁结束日期
        contractUrl: '', // 合同附件url
        contractId: '', // 合同附件id
        type: 0, // 操作类型，添加合同0，续签合同1
        enterpriseId: 0// 企业id
      },
      // 所属行业
      selectedList: [],
      // 用于存储时间
      selectedDate: []

    }
  },
  created() {
    this.getEnterprise()
    this.getParkRentBuilding()
  },
  methods: {
    // 渲染页面
    async getEnterprise() {
      const res = await getEnterprise({ page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      this.list = res.data.rows
      this.pageParams.total = res.data.total
    },
    // 下拉展开
    async expandChange(row) {
      const res = await getEnterpriseRent(row.id)
      console.log(res.data)
      this.arrList = res.data
    },
    // 模糊搜索
    async chaXun() {
      const result = await getEnterprise({
        name: this.pageParams.name // 使用输入的楼宇名称作为模糊搜索关键字
      })
      this.list = result.data.rows // 更新数据
    },
    // 每页多少条
    handleCurrentChange(pageSize) {
      this.pageParams.page = pageSize
      this.getEnterprise()
    },
    // 当前页
    currentChange(page) {
      this.pageParams.page = page
      this.getEnterprise()
    },
    //  查询可租赁楼宇 下拉列表
    async getParkRentBuilding() {
      const res = await getParkRentBuilding()
      this.selectedList = res.data
    },
    // 确定按钮
    async submit() {
      const [startTime, endTime] = this.selectedDate // 获取开始和结束日期
      this.contractList.startTime = startTime // 将开始日期赋值给cardStartDate字段
      this.contractList.endTime = endTime // 将结束日期赋值给cardEndDate字段

      await postParkEnterpriseRent(this.contractList)
      this.$message.success('添加成功')
      this.dialogVisible = false
    },
    // 添加合同按钮
    contract(row) {
      this.contractList.enterpriseId = row.id
      this.dialogVisible = true
    },
    del(id) {
      this.$confirm('你确定删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteParkEnterprise(id)
        // 刷新页面
        this.getEnterprise()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3)
    },
    // 上传图片
    async uploadImage(e) {
      console.log(e)
      const file = e.file
      // 2 formData 对象
      const formData = new FormData()
      // 把文件包装起来
      // formData.append("键",值)
      formData.append('file', file)
      formData.append('type', '1')
      // 3 把文件发送给后端即可
      const res = await postUpload(formData)
      this.contractList.contractUrl = res.data.url
      this.contractList.contractId = res.data.id
      // 4 收尾
      this.$message.success('上传员工信息成功')
    },
    beforeUpload(file) {
      const list = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
      const isJPG = list.includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
    }

  }

}

</script>
<style scoped>
.input-1{
  width: 200px;
}
.chaxun{
margin-left: 20px;

}
.biaoge{
margin-left: 20px;
}
.yanse{
  background-color: #f4f6f8;
  display: flex;

}
.yanse1{
   display: flex;
}
.box{
  display: block;
  margin: 10px 45px;
}
.block{
float: right;
margin-top: 20px;
}
.el-form-a{
  margin-left: 80px;
}
.el-row-right{
  margin-top: 50px;
  margin-left:400px;
}
.icon-tubiao{
  border: 1px solid #fff;
}
.demo-ruleForm{
  margin-left: 90px;
}

</style>
